<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>成绩分析</title>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
        <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
        <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
        <script src="js/echarts.min.js"></script>

        <link rel="stylesheet" type="text/css" href="css/base.css">
        <style>
            .content1 {
             width: 100%;
             padding: 0;
             margin: auto;
             float: right; 
             height: 100%;
             
            }
            .title {
             width: 100%;
             padding-left: 2%;
             margin: auto;
             float: right;
             font-size: medium;
             height: 60px;
             background-color: rgb(189, 215, 238);
             color: rgb(48, 84, 150);
             line-height: 60px;
            }
            .mainview{
                position: relative;
                overflow:hidden;
            }
            span {
             color:darkblue;
             font-size: medium;
            }
            .top{
             margin-top: 7%;
            }
            .tips{
             margin-left: 50px;
            }
            .radius{
             border-radius: 5px;
             border-color: #0a0a0a;
            }
            .btn-primary{
             margin-left:20%;
             background-color: #305496;
            }
            .table {
             width: 60%;
             margin: 30px auto;
            }
            .text-middle{
             text-align: center;
            }
            td{
             text-align: center;
            }
            .model-margin-top{
             margin-top: 10px;
            }
            .col-md-3{
             width: 17%;
            }
            .col-md-4{
             width: 25%;
            }
            #echarts {
             width: 100%;
             height: 300px;
             margin-top: 200px;
             position: absolute;
             z-index: -1;
             text-align:center;
            }
        </style>
    </head>
    <body>
        <div th:replace="base/base::baseheader"></div>
        <div class="row content">
            <div th:replace="base/base::basemenu"></div>
            <div class="mainview">
                <form>
                    <div class= "content1">
                        <div class= "row title">
                         <b style="font-size: 26px;">成绩分析</b>
                        </div>
                        <div class= "row top">
                            <div class="col-md-4">
                                <select  class="form-control dp_edit radius" id="year">
                                    <option value="" hidden>学期</option>
                                    <option th:each="item:${year}" th:value="${item}" th:text="${item}"></option>
                                </select>
                            </div>
                            <div class="col-md-3">
                                <select  class="form-control dp_edit radius" id="examtype">
                                    <option value=""  hidden>考试类别</option>
                                    <option value="单元">单元</option>
                                    <option value="期中">期中</option>
                                    <option value="期末">期末</option>
                                </select>
                            </div>
                            <div class="col-md-3" hidden>
                                <select  class="form-control dp_edit radius" name="classname" id="classname">
                                    <option value=""  hidden>班级</option>
                                    <option value="一班">一班</option>
                                    <option value="二班">二班</option>
                                    <option value="三班">三班</option>
                                    <option value="四班">四班</option>
                                    <option value="五班">五班</option>
                               </select>
                            </div>
                            <div class="col-md-3">
                                <select  class="form-control dp_edit radius" id="subject">
                                    <option value=""  hidden>科目</option>
                                    <option th:each="item:${course}" th:value="${item.course_id}" th:text="${item.course_name}"></option>
                               </select>
                            </div>
                            <div class="col-md-1">
                                <button type="button" id="analysis" class="btn btn-primary btn-sm" data-toggle="modal">分析</button>
                            </div>
                            <div class="col-md-1">
                                <button type="button" id="distribute" class="btn btn-sm" data-toggle="modal" style="background-color: #BDD7EE; color: #305496;">点击查看成绩分布</button>
                            </div>
                        </div>
                    </div>
                    <div id="echarts" class="" style="">
                    </div>
                </form>
            </div>
        </div>
        <div th:replace="base/base::basefooter"></div>
        <script>
            $(document).ready(function(){
                $(document).on("click", "#analysis", (function(){
                    var subject_text =$("#subject").find("option:selected").text(); 
                    var yearList = new Array();  // 年份
                    var score_01 = new Array();
                    var score_02 = new Array();
                    var score_03 = new Array();
                    $("#year, #examtype, #subject").css("border-color", "black");
                    var year = $("#year").val();  // 考试年份
                    var examtype = $("#examtype").val();  // 考试类别
                    var subject = $("#subject").val();  // 科目
                    if(subject == "01"){
                        subject_name = "chinese"
                    }else if(subject == "02"){
                        subject_name = "math"
                    }else if(subject == "03"){
                        subject_name = "english"
                    }else if(subject == "04"){
                        subject_name = "physics"
                    }else if(subject == "05"){
                        subject_name = "chemistry"
                    }
                    
                    // 入力检查
                    if(year == ""){
                        alert("请选择您要查询的学期！");
                        $("#year").css("border-color", "#DD4B39");
                    }else if(examtype == ""){
                        alert("请选择考试类别！");
                        $("#examtype").css("border-color", "#DD4B39");
                    }else if(subject == ""){
                        alert("请选择科目！");
                        $("#subject").css("border-color", "#DD4B39");
                    }else if(year !="" && examtype !="" && subject !=""){
                        $.ajax({
                            type: 'POST',
                            url: '/result_analysis',
                            data: {"year": year,
                                   "examtype": examtype,
                            }, 
                            dataType: 'json',
                            success:function(data){
                                console.log("收到结果", data)
                                // 学生的个数
                                for (var i = 0; i < data["data"].length; i++){ 
                                    yearList.push(data["data"][i]["stu_id"].substring(0, 4));
                                }
                                var yearList_new = new Array(); 
                                for(var i = 0; i < yearList.length; i++) {
                                    if( !yearList_new.includes( yearList[i]) ){  //includes 检测数组是否有某个值
                                        yearList_new.push(yearList[i]);
                                    }
                                }
                                yearList_new.sort(function (a, b){ return a-b });  // 排序
                                 var studentList = new Array();  // 学生
                                 var scoreList = new Array();
                                for (var i = 0; i < data["data"].length; i++){ 
                                    if(data["data"][i]["stu_id"].substring(0, 4) == yearList_new[0]){
                                        score_01.push(data["data"][i][subject_name]);  // 高年级
                                    }else if(data["data"][i]["stu_id"].substring(0, 4) == yearList_new[1]){
                                        score_02.push(data["data"][i][subject_name])  // 中年级
                                    }else if(data["data"][i]["stu_id"].substring(0, 4) == yearList_new[2]){
                                        score_03.push(data["data"][i][subject_name])  // 低年级
                                    }
                                    scoreList[0] = score_01
                                    scoreList[1] = score_02
                                    scoreList[2] = score_03
                                }
                                scoreList.sort(function (a, b){ return a.length-b.length });
                                // 取人数最多
                                for (var i = 0; i < scoreList[2].length; i++){ 
                                    studentList.push('');
                                }
                                
                                // 平均数
                                var sum_01 = 0;
                                var sum_02 = 0;
                                var sum_03 = 0;
                                for(var i = 0; i < score_01.length; i++){
                                    sum_01 += score_01[i];  // 高年级
                                    
                                }
                                for(var i = 0; i < score_02.length; i++){
                                    sum_02 += score_02[i];  // 中年级
                                }
                                for(var i = 0; i < score_03.length; i++){
                                    sum_03 += score_03[i];  // 低年级
                                }
                                var avg_01 = Math.round(sum_01 / score_01.length * 100) / 100;  // 高年级
                                var avg_02 = Math.round(sum_01 / score_02.length * 100) / 100;  // 中年级
                                var avg_03 = Math.round(sum_01  /score_03.length * 100) / 100;  // 低年级
                                                             
                                var myChart = echarts.init(document.getElementById('echarts'));
     
                                // 指定图表的配置项和数据
                                var option = {
                                    title: {
                                        text: year + '学期——' + yearList_new[0] + "届" + '~' + yearList_new[2] + "届" + '<' + subject_text + '>成绩',
                                        "top": '90%',
                                        "left": '28%',
                                        "textStyle": {"fontSize": 18,
                                                      "color": "#444",
                                                      "text-align": "center",
                                                      "margin-top":"20px"},
                                        },
                                    legend: {
                                        tooltip: {
                                            show: true
                                        }
                                    },
                                    // x轴
                                    xAxis: {
                                        data: studentList
                                    },
                                    // y轴根据学生比例自动生成
                                    yAxis:{},
                                    // 分数显示
                                    series: [{
                                        name: yearList_new[0] + "届" + "" + "平均分为: " + avg_01 + "分",
                                        type: 'line',
                                        markPoint: {
                                            symbol: 'triangle',
                                            data: [{
                                                name: '最高分',
                                                type: 'max',
                                            },{
                                               name: '最低分',
                                               type: 'min'
                                            }],
                                            symbolSize:[10, 1],  // 容器大小
                                            symbolOffset:[0, -10],  //位置偏移,
                                        },
                                        data: score_01,
                                    },{
                                        name: yearList_new[1] + "届" + "平均分为: " + avg_02 + "分",
                                        type: 'line',
                                        markPoint: {
                                            data:[{
                                                name: '最高分',
                                                type: 'max'
                                            },{
                                                name: '最低分',
                                                type: 'min'
                                            }],
                                            symbolSize:[10, 1],
                                            symbolOffset:[0, 10],
                                        },
                                        data: score_02,
                                    },{
                                        name: yearList_new[2] + "届" + "平均分为: " + avg_03 + "分",
                                        type: 'line',
                                        markPoint: {
                                            data:[{
                                                name: '最高分',
                                                type: 'max'
                                            },{
                                               name: '最低分',
                                               type: 'min'
                                            }],
                                            symbolSize:[10, 1],
                                            symbolOffset:[0, 20],
                                        },
                                        data: score_03,
                                    }],
                               }
                               // 使用以上指定的（配置项和数据）显示图表
                               myChart.setOption(option);
                           },
                           error: function(data){
                               alert('获取数据失败');
                           }
                       });
                   }
               }));
               
               $(document).on("click", "#distribute", (function(){
                   var subject_text =$("#subject").find("option:selected").text(); 
                   var yearList = new Array();  // 年份
                   var score_01 = new Array();
                   var score_02 = new Array();
                   var score_03 = new Array();
                   var proportion_01 = new Array();
                   var proportion_02 = new Array();
                   var proportion_03 = new Array();
                   var proportionList_01 = new Array();
                   var proportionList_02 = new Array();
                   var proportionList_03 = new Array();
                   $("#year, #examtype, #subject").css("border-color", "black");
                   var year = $("#year").val();  // 考试年份
                   var examtype = $("#examtype").val();  // 考试类别
                   var subject = $("#subject").val();  // 科目
                   if(subject == "01"){
                       subject_name = "chinese"
                   }else if(subject == "02"){
                       subject_name = "math"
                   }else if(subject == "03"){
                       subject_name = "english"
                   }else if(subject == "04"){
                       subject_name = "physics"
                   }else if(subject == "05"){
                       subject_name = "chemistry"
                   }
                   
                   // 入力检查
                   if(year == ""){
                       alert("请选择考试学期！");
                       $("#year").css("border-color", "#DD4B39");
                   }else if(examtype == ""){
                       alert("请选择考试类别！");
                       $("#examtype").css("border-color", "#DD4B39");
                   }else if(subject == ""){
                       alert("请选择科目！");
                       $("#subject").css("border-color", "#DD4B39");
                   }else if(year !="" && examtype !="" && subject !=""){
                       $.ajax({
                           type: 'POST',
                           url: '/result_analysis',
                           data: {"year": year,
                                  "examtype": examtype,
                           }, 
                           dataType: 'json',
                           success: function(data){
                               // 学生人数
                               for (var i = 0; i < data["data"].length; i++){ 
                                   yearList.push(data["data"][i]["stu_id"].substring(0, 4));
                               }
                               var yearList_new = new Array(); 
                               for(var i = 0; i < yearList.length; i++) {
                                   if( !yearList_new.includes( yearList[i]) ){  //includes 判断数组是否有某个值
                                       yearList_new.push(yearList[i]);
                                   }
                               }
                               yearList_new.sort(function (a, b){ return a-b });
                                var studentList = new Array();  // 学生
                               for (var i = 0; i < data["data"].length; i++){ 
                                   if(data["data"][i]["stu_id"].substring(0, 4) == yearList_new[0]){
                                       score_01.push(data["data"][i][subject_name])  // 高年级
                                   }else if(data["data"][i]["stu_id"].substring(0, 4) == yearList_new[1]){
                                       score_02.push(data["data"][i][subject_name])  // 中年级
                                   }else if(data["data"][i]["stu_id"].substring(0, 4) == yearList_new[2]){
                                       score_03.push(data["data"][i][subject_name])  // 低年级
                                   }
                               }
                               var a = 0
                               var b = 0
                               var c = 0
                               for (var i = 0; i < score_01.length; i++){ 
                                   if(score_01[i] < 60){
                                       a++
                                   }else if(60 <= score_01[i] && score_01[i] <= 80){
                                       b++
                                   }else if(score_01[i] > 80){
                                       c++
                                   }
                               }
                               proportion_01.push(Math.round(a / score_01.length * 100), Math.round(b / score_01.length * 100), Math.round(c / score_01.length * 100))
                               
                               var d = 0
                               var e = 0
                               var f = 0
                               for (var i = 0; i < score_02.length; i++){ 
                                   if(score_02[i] < 60){
                                       d++
                                   }else if(60 <= score_02[i] && score_02[i] <= 80){
                                       e++
                                   }else if(score_02[i] > 80){
                                       f++
                                   }
                               }
                               proportion_02.push(Math.round(d / score_02.length * 100), Math.round(e / score_02.length * 100), Math.round(f / score_02.length * 100))
                               
                               var x = 0
                               var y = 0
                               var z = 0
                               for (var i = 0; i < score_03.length; i++){ 
                                   if(score_03[i] < 60){
                                       x++
                                   }else if(60 <= score_03[i] && score_03[i] <= 80){
                                       y++
                                   }else if(score_03[i] > 80){
                                       z++
                                   }
                                   
                               }
                               proportion_03.push(Math.round(x / score_03.length * 100), Math.round(y / score_03.length * 100), Math.round(z / score_03.length * 100))
                               
                               proportionList_01.push(proportion_01[0], proportion_02[0], proportion_03[0])
                               proportionList_02.push(proportion_01[1], proportion_02[1], proportion_03[1])
                               proportionList_03.push(proportion_01[2], proportion_02[2], proportion_03[2])
                               
                               studentList.push('', '', '');  // x轴
                               
                               for (var i = 0; i < yearList_new.length; i++){ 
                                   yearList_new[i] = yearList_new[i] + "届"
                               }
                               
                               var myChart = echarts.init(document.getElementById('echarts'));
                               // 指定图表的配置项和数据
                               var option = {
                                   title:{
                                       text: year + '学期——' + yearList_new[0] + '~' + yearList_new[2] + '<' + subject_text + '>成绩',
                                       "top": '90%',
                                       "left": '28%',
                                       "textStyle": {
                                                      "fontSize": 18,
                                                      "color": "#444",
                                                      "text-align": "center",
                                                      "margin-top":"20px"
                                        },
                                  },
                                  legend:{
                                      tooltip: {show: true}
                                  },
                                  // x轴
                                  xAxis:{
                                      data: yearList_new
                                  },
                                  // y轴
                                  yAxis:{},
                                  // 分数显示
                                  series:[{
                                      name: '0-59',
                                      type: 'bar',
                                      data: proportionList_01,
                                      itemStyle: { normal: { label: {show: true}}},
                                   },{
                                      name: '60-80',
                                      type: 'bar',
                                      data: proportionList_02,
                                      itemStyle: {normal: { label: {show: true}}},
                                   },{
                                      name: '81-100',
                                      type: 'bar',
                                      data:proportionList_03,
                                      itemStyle: {normal: { label: {show: true}}},
                                   }]
                              }
                              // 使用刚指定的配置项和数据显示图表。
                              myChart.setOption(option);
                          },
                          error: function(data){
                              alert('获取数据失败');
                          }
                      })}
                }))
            });
        </script>

        <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
    </body>
</html>
